<template>
  <div class="box-rank">
    <div class="rank-top">
      <p class="title">热门景区排行</p>
      <p class="bg"></p>
    </div>
    <!-- 图形图标的容器 -->
    <div class="rank-bottom" ref="refTopPie"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 引入echarts
import 'echarts-liquidfill'
import * as echarts from 'echarts'
// 生命周期函数
onMounted(() => {
  createTopPie()
})
//右侧饼图
const refTopPie = ref()
const createTopPie = () => {
  function Pie() {
    let dataArr = []
    for (var i = 0; i < 150; i++) {
      if (i % 3 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 10,
          itemStyle: {
            color: '#fff',
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,0)',
          },
        })
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 25,
          itemStyle: {
            color: 'rgba(0,0,0,0)',
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,0)',
          },
        })
      }
    }
    return dataArr
  }
  const option = {
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '西湖', max: 6500 },
        { name: '东江沙公园', max: 16000 },
        { name: '红花湖景区', max: 30000 },
        { name: '和江楼', max: 38000 },
        { name: '水东明清古街', max: 52000 },
        { name: '新华书店', max: 25000 },
      ],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget',
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: 'Actual Spending',
          },
        ],
      },
    ],
  }

  const myChart = echarts.init(refTopPie.value, null, { renderer: 'svg' })
  myChart.setOption(option)
  return myChart
}
</script>

<style scoped lang="scss">
.box-rank {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;

  .rank-top {
    .title {
      color: #59b4e6;
      font-size: 20px;
    }

    .bg {
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png);
      margin-top: 20px;
    }
  }

  .rank-bottom {
    height: calc(100% - 50px);
  }
}
</style>
